<style lang="scss" scoped>
    .mint-popup-right {
        width: 100%;
        height: 100%;
        z-index: 10001!important;
        background: #FCFCFC;
    }
    .avatar {
        margin: .24rem .1rem;
    }
</style>

<template>
    <mt-popup
        v-model="visible"
        :modal="false"
        position="right">
        <mt-header fixed title="添加泳池经理">
            <mt-button icon="back" slot="left" @click="visible = false"></mt-button>
        </mt-header>
        <div class="base-info-area">
            <mt-field readonly label="编辑头像">
                <div class="avatar" @click="sheetVisible = true">
                    <img v-if="!show" src="~assets/img/avator.png" alt="placer">
                    <div v-else class="preview" :style="'backgroundImage:url('+headerImage+')'"></div>
                </div>
                <input type="file" style="display: none" @change="onFileChange" id="take-picture" accept="image/*">
            </mt-field>
            <mt-field disableClear label="姓名" placeholder="请输入姓名"></mt-field>
            <mt-field disableClear label="联系电话" placeholder="请输入手机号"></mt-field>
            <mt-select 
                v-model="selectPosition"
                :data="positionList"
                value-key="cName"
                label="授权职位" 
                placeholder="请选择授权职位">
            </mt-select>
        </div>
        <mt-header class="fixed-bt" title="确定"></mt-header>
        <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>  
    </mt-popup>
</template>

<script type="text/babel">
    import { upload } from '@/utils/index.js'

    export default {
        props: {
            value: Boolean
        },
        data() {
            return {
                visible: this.value,
                sheetVisible: false,
                actions: [],
                //提交用表单参数
                picValue: '',
                //预览显示用的src
                headerImage: '',
                //显示上传的头像
                show: false ,
                positionList: [
                    { cName: '泳池经理', value: 0 },
                    { cName: '泳池管理人', value: 1 },
                    { cName: '泳池主管', value: 2 },
                    { cName: '管理者', value: 3 },
                ],
                selectPosition: {}
            };  
        },       
        mounted() {
            this.actions = [
                {
                    name: "相册选择",
                    method: this.openAlbum
                }
            ]
        },
        watch: {
            value(current) {
                this.visible = current;
            },
            visible(current) {
                this.$emit('input', current)
            }
        },
        methods: {  
            // takePhoto() {
            //     console.log("taking photo")
            // },
            openAlbum() {
                $('#take-picture').click()
            },
            onFileChange(e) {
                upload(e, this)
            }
        },
    };
</script>